<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dateGrid9+分页对象</title>
<script type="text/javascript" src="static/easyui/jquery.min.js"
	charset="utf-8"></script>
<link rel="stylesheet" href="/static/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="/static/easyui/themes/icon.css">
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"
	charset="utf-8"></script>
<script type="text/javascript"
	src="static/easyui/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/js/yzy.js"></script>	
<script type="text/javascript">
		$(function(){
			//数值验证
			$('#username').numberbox({
				min:0,
				max:150,
				required:true,
				missingMessage:'年龄必填！',
				precision:0/* 允许的小数点 */
			});
			
			//日期组件
			$('#endtime').datebox({
				required:true,
				missingMessage:'日期必选！',
				editable:false
			});
			
			$('#money').numberbox({
				min:1000,
				max:50000,
				required:true,
				missingMessage:'薪水必填！',
				precision:2/* 允许的小数点 */
			});
			//日期时间组件
			$('#timedate,#xxxtime').datetimebox({
				required:true,
				missingMessage:'时间必填',
				editable:false
			});
			/* 新增提交表单的方法 */
			$('#but').click(function(){
				
				if($('#myform').form('validate')){
					$.ajax({
						type:'post',
						url:'add',
						cache:false,
						data:$('#myform').serialize(),
						dataType:'text',
						success:function(result){
							//1.关闭窗口
							$('#mydialog').dialog('close');
							//2.提示信息
							$.messager.show({
								title:"OK",
								msg:'操作成功'
							});
							//3.刷新页面
							$('#t_table').datagrid('reload');
							
							
						},
						error:function(){
							$.messager.alert('警告','操作失败');
						}
						
					});
				}else{
					$.messager.show({
						title:'提示信息',
						msg:'输入的数据不合规范，不能保存'
					});
				}
			});
			
			
			
			var h = document.documentElement.clientHeight || document.body.clientHeight;
			$('#t_table').datagrid({
				url:'testpage',
				idField:'id',		//进行数据处理时传到后台的参数
				pagination:true,	//分页
				pageSize:20,
				pageList:[10,20,30,40,50],
				height:h-35,
				fitColumns:true,	//宽度是否自适应
				striped:true,	//隔行变色 斑马色
				loadMsg:'数据正在疯狂的加载中...',//加载数据时显示的内容
				rownumbers:true,	//显示序号
				singleSelect:false,	//单选模式
				scrollbarSize:0,	//滚动条宽度
				frozenColumns:[ [ 
					{
						field:'ck',
						width:10,
						checkbox:true
					}
				] ],
				columns:[ [
					{field:'id',title:'编号',width:80,align:"center",sortable:true,
						styler:function(value,record){/* 给某一个单元格赋予属性 */
							if(value == 29){
								return 'background:red';
							}
						},
						formatter:function(value,record,index){//鼠标悬停显示数据
							return '<span title='+value+'>'+value+'</span>'
							
							/* var str='';
							$.ajax({		//写所属城市的时候，穿到前台的是数字的时候，即不是所需要的东西，就要传到后台去
								type:'post',
								url:'',
								cache:false,
								async:false,//同步请求 重点
								data:{id:value},
								dataType:'josn',
								success:function(result){
									str=result.name;
								}
							});
							return str; */
						},
						
					
					},
					{field:'name',title:'姓名',width:80,align:"center"},
					{field:'sex',title:'性别',width:80
						,formatter:function(value,record,index){/* 改变参数显示效果 */
								if(value=='男'){
									return '<span >男</span>';
								}else{
									return '<span >女</span>';
								}
							}	
					},
					{field:'test',title:'测试',width:80},
					{field:'endtime',title:'时间',width:80},
					{field:'username',title:'用户名',width:80},
					{field:'password',title:'密码',width:80,sortable:true},
					
				] ],
				toolbar:[
					{
						text:'增加用户',
						iconCls:'icon-add',
						handler:function(){
							$('#mydialog').dialog({
								title:'新增用户'
							});
							
							//$('#mydialog').find('input[name!=sex]').val('');
							$('#myform').get(0).reset();
							//$('#myform').form('clear');
							$('#mydialog').dialog('open');
						}
					},
					{
						text:'修改用户',
						iconCls:'icon-edit',
						handler:function(){
							var arr= $('#t_table').datagrid('getSelections');
							if(arr.length !=1 ){
								$.messager.show({
									title:'提示',
									msg:'只能选择一行进行修改'
								});
							}else{
								$('#mydialog').dialog({
									title:'用户修改'
								});
								//1.打开窗口
								$('#mydialog').dialog('open');
								//2.清空表单数据
								$('#myform').get(0).reset();
								//把选中的元素放到表单
								$('#myform').form('load',{
									id:arr[0].id,
									username:arr[0].username,
									password:arr[0].password,
									name:arr[0].name,
									sex:arr[0].sex,
									endtime:arr[0].endtime,
									test:arr[0].test
								});
							}
						}
					},{
						text:'删除用户',
						iconCls:'icon-remove',
						handler:function(){
							var arr= $('#t_table').datagrid('getSelections');
							if(arr.length<=0){
								$.messager.show({
									title:'提示',
									msg:'请选择删除的用户'
								});
							}else{
								//获取所有删除用户的姓名 并保存下来 然后给用户提示
								var dele="";
								for(var i=0 ;i<arr.length;i++){
									dele +='('+ arr[i].name+')&emsp;';
								}
								dele = dele.substring(0 , dele.length-6)
								$.messager.confirm('确定删除?','删除名单(姓名):<br/> '+dele,function(r){
									if(r){//确定了
										var ids="";
										//var selectRows = [];//获取需要删除的行元素集合
										for(var i=0 ;i<arr.length;i++){
											ids += arr[i].id+',';
											//selectRows.push(arr[i]);//遍历存入
										}
										/* for(var j =0;j<selectRows.length;j++){//首先删除表的内容，然后删除后台的
										    var index = $('#t_table').datagrid('getRowIndex',selectRows[j]);
										    $('#t_table').datagrid('deleteRow',index);
										} */
										ids = ids.substring(0 , ids.length-1)
										$.post('delete',{ids:ids},function(result){
											//1.刷新数据表格
											$('#t_table').datagrid('reload');
											//2.清空idField
											$('#t_table').datagrid('unselectAll');
											//2.给提示信息
											$.messager.show({
												title:'提示',
												msg:'删除成功！'
											});
										});
									}else{
										return ;
									}
								});
								
							}
						}
					}
					
				]
			});
			
			
			$('#but1').click(function(){
				$('#mydialog').dialog('close');
			});
			
			//
			$('#gobtn').click(function(){
				$('#t_table').datagrid('load', serializeForm($('#mysearch').form()));
			});

			$('#removebtn').click(function(){
				//清空form表单
				$('#mysearch').form('clear');
				$("#t_table").datagrid('load', {});
			});

		});
		//序列化表单
		function serializeForm(form){
			var obj = {};
			$.each(form.serializeArray(), function(index){
				if(obj[this['name']]){
					obj[this['name']] = obj[this['name']] + ',' + this['value'];
				}else{
					obj[this['name']] = this['value'];
				}
			});
			return obj;
		}

	</script>
<style type="text/css">
body {
	margin: 0px;
}

</style>
</head>
<body>
	<div id="lay" style="width: 100%;height: 100%;">
		<div region='north' class="easyui-layout" style="height: 35px;background: #f4f4f4;">
			<form action="" id="mysearch" method="post">
				<span style="line-height: 30px;">用户名:<input name="name" type="text" value="" id="yhm">
				时间：<input name="endtime" value="" class="easyui-datetimebox" width="100%" editable="false"></span>
				<a class="easyui-linkbutton" iconCls='icon-search' id="gobtn">开始检索</a>
				<a class="easyui-linkbutton" iconCls='icon-undo' id="removebtn">清空条件</a>
			</form>
		</div>
		<div region='center'>
			<table id="t_table"></table>
		</div>
	</div>
	<div id="mydialog" modal="true" title="用户新增" class="easyui-dialog" style="width: 400px;"
		closed="true">
		<form action="add" method="post" id="myform">
			<input type="hidden" name="id" value="">
			<table>
				<tr>
					<td>用户名</td>
					<!-- required:true不为空 -->
					<td><input type="text" name="name" value=""
						class="easyui-validatebox"
						data-options="required:true,validType:'equals[2,5]',missingMessage:'姓名必填！',invalidMessage:'会覆盖JS的校验提示（不建议使用）'"></td>
				</tr>
				<tr>
					<td>账号</td>
					<td><input type="text" name="username" value="" style="width: 100%" id="username"></td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="text" name="password" value=""
						class="easyui-validatebox"
						data-options="required:true,validType:'passwordinput[6]',missingMessage:'密码必填！'"></td>
				</tr>
				<tr>
					<td>性别</td>
					<td>男<input type="radio" name="sex" value="男"
						checked="checked">女<input type="radio" name="sex"
						value="女">
					</td>
				</tr>
				<tr>
					<td>时间</td>
					<td><input type="text" name="endtime" value="" id="endtime" style="width: 100%"></td>
				</tr>
				<tr>
					<td>测试(所属城市)</td>
					<td><input type="text" name="test" value=""
						class="easyui-combobox" url="listfind" valueField="id"
						textField="name" editable="false"></td>
				</tr>
				<tr>
					<td>薪水（无实际意义）</td>
					<td><input type="text" value="" id="money" style="width: 100%"></td>
				</tr>
				<tr>
					<td>时分秒</td>
					<td><input type="text" value="" id="timedate" name="timedate" style="width: 100%"></td>
				</tr>
				<tr>
					<td></td>
					<td><a id="but" class="easyui-linkbutton">提交</a></td>
					<td><a id="but1" class="easyui-linkbutton">关闭</a></td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>